<template>
  <div class="examineDetail-content">
          <div class="examineDetailBox">
               <div class="header">漳州市和平镇卫生医院</div>
                <div class="txt1"><span>医疗卫生</span> <div class="line"></div><span>定级医疗机构</span></div>
                <div class="tableBox">
                            <div class="tr soildTop display-fx-center">
                              <div class="td">
                                    <span>所在镇/街道</span>
                              </div>
                              <div class="full" style="border-right:none">和平镇</div>
                          </div>
              
                          <div class="tr soildTop display-fx-center">
                                <div class="td">
                                    <span>联系电话</span>
                                </div>
                                <div class="full">13000000000</div>
                          </div>
                </div>
                <div class="tableBox">
                            <div class="tr per100 display-fx-center">
                              <div class="td">
                                    <span>详细地址</span>
                              </div>
                              <div class="full">和平镇</div>
                          </div>
                </div>
                <div class="tableBox">
                            <div class="tr display-fx-center">
                              <div class="td">
                                    <span>监管员</span>
                              </div>
                              <div class="full" style="border-right:none">66</div>
                          </div>
                            <div class="tr display-fx-center">
                                <div class="td">
                                    <span></span>
                                </div>
                                <div class="full"></div>
                          </div>
                </div>
                <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">检查视频</div>
                </div>
                <div class="videoContentCss">
                  <video controls class="videoCss">
                    <source :src="mp4Url" type="video/mp4">
                  </video>
                  <el-button type="primary" class="videoBtnCss">对讲</el-button>
                </div>
               <!-- 检查内容 -->
                <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">检查内容</div>
                </div>  
                <div class="examineBox" v-for="(item,index) in examineList" :key="index + 's'">
                       <div class="title" :class="{active:index == 1}">{{item.title}}</div>
                       <div class="tr" v-for="(it,i) in item.list" :key="i + 'y'">
                             <div class="td">1、执业许可证管理符合要求</div>
                             <div class=""></div>
                       </div>
                </div>
                <!-- 占位不删 -->
                 <div style="height:15px"></div>

                <el-table :data="dataList1" border >
                        <el-table-column label="检查项目" align="left" prop="time" />
                        <el-table-column label="监测样品数" width="200" align="center" prop="case" />
                          <el-table-column label="监测样品数" width="200" align="center" prop="case" />
                        <!-- <el-table-column label="操作" align="center" prop="B">
                              <template slot-scope="scope">
                                  <el-button @click="handleDetail(scope.row)" size="mini" type="text">查看详情</el-button>
                            </template>
                        </el-table-column > -->
                </el-table>
                  <el-table :data="dataList1" border style="border-top:none">
                        <el-table-column label="实验室检测" align="left" prop="time" />
                        <el-table-column label="监测样品数" width="200" align="center" prop="case" />
                        <el-table-column label="合格样品数" width="200" align="center" prop="case" />
                </el-table>

                <el-table :data="dataList1" border style="border-top:none">
                        <el-table-column label="棉品质" align="left" prop="time" />
                        <el-table-column label="检查情况" width="400" align="center" prop="case" />
                </el-table>
                <el-table :data="dataList1" border style="border-top:none">
                        <el-table-column label="集中空调通风系统" align="left" prop="time" />
                        <el-table-column label="检查情况" width="400" align="center" prop="case" />
                </el-table>

                
                


               <!-- 监督情况 -->
                <div class="headerBox">
                      <div class="line"></div>
                      <div class="title">监督情况</div>
                </div>
                <div class="tableBox">
                            <div class="tr per100 soildTop display-fx-center">
                              <div class="td per50">
                                    <span>制作卫生监督意见书责令整改</span>
                              </div>
                              <div class="full per50">有</div>
                          </div>
                </div>
                <div class="tableBox">
                            <div class="tr per100 display-fx-center">
                              <div class="full per100 upload">下载查看</div>
                          </div>
                </div>

            
               <div class="footer-btn">
                      <el-button class="btn" @click="goBackBtn">返回</el-button>
               </div>
          </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
         examineList:[{title:'（一）医疗机构资源',list:[{},{},{}]},{title:'（一）医疗机构资源',list:[{},{},{}]}],
         dataList1:[{time:'现场快速检测',case:'33'}]
      };
    },
    created() {

    },
    methods: {
        goBackBtn(){
          this.$router.back()
        },
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .per100{
             width: 100%!important;
         }
         .per50{
            width: 50%!important;
         }
         .soildTop{
             border-top:solid 1px  #D3D8E2;
         }
         .examineDetail-content{
              overflow-y: auto;
              position: relative;
              background-color: #fff;
              padding: 40px 20px;
              border-radius: 10px;
              height: calc( 100vh - 66px - 128px);
              // display: flex;
              // flex-direction: column;
             .examineDetailBox{
                    max-width: 930px;
                    margin: 0 auto;
                    padding-bottom:40px;

              }
            .header{
                 font-size: 22px;
                 font-weight: bold; 
                 color: #484848;
                 text-align: center;
            }
            .txt1{
                 font-size: 12px;
                 color: #797C84;
                 @extend .display-fx-center;
                 justify-content: center;
                 margin: 20px 0;
                 .line{
                      border-left: solid 1px #797C84; 
                      height: 12px;
                      margin: 0 6px 0 6px;
                      position: relative;
                      top: 1px;
                   }
                }
            .tableBox{
                  font-size: 14px;
                  @extend .display-fx-center;
                  .tr{
                      width: 50%;
                      height: 50px;
                      display: flex;
                      line-height: 50px;
                      .td{
                       width: 120px;
                       height: 100%;
                       border: solid 1px #D3D8E2;
                       background: #F4F8FF;
                       padding: 0 8px;
                       border-top:none;
                       border-right:none;
                       color: #797C84;
                       flex-shrink: 0;         
                   }
                   .full{
                         width: 100%;
                         height: 100%;
                         line-height: 50px;
                         border: solid 1px #D3D8E2;
                         border-top:none;  
                         padding: 0 10px;             
                      }
                    .upload{
                      text-align:center;
                      color:#5D85FF;
                      cursor: pointer;
                    }
                  } 
    
            }
           .headerBox{
                font-size: 16px;
                color: #484848;
                font-weight: bold;
                margin-top:40px;
                margin-bottom:15px;
                @extend .display-fx-center;
                .line{
                  width: 4px;
                  height: 12px;
                  background: #5D85FF;
                  border-radius: 6px 6px 6px 6px;
                  margin-right:6px;
                }
             }
             .videoContentCss{
                  margin-top: 20px;
                  text-align: center;
                  position: relative;
                  .videoCss{
                    width: 100%;
                    // height: 492px;
                  }
                  .videoBtnCss{
                    transform: translate( calc( -100% - 10px) , calc( -100% - 40px) );
                    bottom: 0;
                    position: absolute;
                  }
                }
             .examineBox{     
                  .title{
                      font-weight: bold;
                      font-size: 14px;
                      color: #484848;
                      line-height: 38px;
                      height: 38px;
                      border: 1px solid #D3D8E2;
                      background: #F4F8FF;
                      padding: 0 10px;
                   }
                   .tr{
                      display: flex;
                      line-height: 38px;
                      color: #797C84;
                      font-size: 14px;
                      border: 1px solid #D3D8E2;
                      border-top:none;
                      .td{
                          width: 820px;
                          border-right:1px solid #D3D8E2;
                          padding: 0 10px;
                      }
                   }
                   .active{
                         border-top:none!important;
                   }
                  
             }
          }
          .footer-btn{
                 width: 100%;
                 background: #FFFFFF;
                 height: 78px;
                 position: fixed;
                 bottom: 0;
                 right: 0;
                .btn{
                   position: fixed;
                   bottom: 20px;
                   right: 20px;    
                }
                 
          }
        ::v-deep{
            .el-table__header-wrapper th{
                 background: #F4F8FF!important;    
           }
          //  鼠标移入表格行不变色
          .el-table .el-table__row:hover td {
            background-color: transparent !important;
          }
        }
</style>
